body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
li {
  list-style: none;
}
body::-webkit-scrollbar {
  display: none;
}

/* 首页 */
.cf-idx {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg1.jpg);
  background-size: cover;
  overflow: hidden;
}
/* 首页顶部 */
.cf-idx .top {
  width: 100%;
  height: 55px;
  background-color: #232323;
}
/* 顶部左边log区域 */
.cf-idx .top .weapper {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 1050px;
  height: 100%;
  margin: 0 auto;
  /* background-color: #fff; */
}
.top .weapper .log {
  display: flex;
}
.top .weapper .log a {
  position: absolute;
  top: 10px;
  z-index: 3;
}
.top .weapper .log img {
  padding: 0 37px 0 37px;
  width: 55px;
  height: 55px;
}
.top .weapper .log .text {
  margin-left: 129px;
  margin-top: 10px;
}
.top .weapper .log .text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.top .weapper .log .text span {
  font-size: 5px;
  color: #5c5c5c;
}
.top .weapper .log .below {
  background-image: url(./images/top-sp.png);
  background-position: 0 0;
  width: 129px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 40px;
}
/* 顶部左边前往官网区域 */
.top .weapper .skip {
  margin-top: 10px;
  background: url(./images/btn1.png) no-repeat;
  width: 202px;
  height: 60px;
  display: block;
  zoom: 0.7;
}

/* 下一页图标 */
/* 定义动画 */
@keyframes nextPage {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}
.cf-idx .box1 {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(70%);
}
.cf-idx .nextPage {
  background-image: url(./images/sp.png);
  background-position: -48px 0;
  width: 101px;
  height: 76px;
  animation: nextPage 0.8s infinite 0.3s linear alternate forwards;
}

/* 下载游戏二维码 */
/* 定义动画 */
@keyframes dap {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(385px);
  }
}
.cf-idx .download {
  box-sizing: border-box;
  position: absolute;
  top: -285px;
  right: 120px;
  padding: 65px 70px 75px 30px;
  width: 430px;
  height: 285px;
  background-image: url(./images/sp.png);
  background-position: -247px -139px;
  animation: dap 0.5s linear alternate forwards;
}
.cf-idx .download .box {
  display: flex;
  justify-content: space-between;
  width: 330px;
  height: 148px;
}
/* 左边的二维码 */
.download .box .yard {
  padding-top: 10px;
  width: 130px;
  height: 150px;
  background-image: url(./images/sp.png);
  background-position: -25px -274px;
}
.download .box .yard img {
  display: block;
  margin: 0 auto;
  width: 105px;
  height: 105px;
}
.download .box .yard p {
  margin-top: 5px;
  text-align: center;
  color: #fbe768;
  font-size: 16px;
}
/* 右边的链接 */
.download .box .links {
  width: 185px;
  float: left;
  padding-top: 20px;
  margin-left: 17px;
}
.download .box .links .apple {
  width: 183px;
  height: 52px;
  background-image: url(./images/sp.png);
  background-position: -21px -136px;
}
.download .box .links .android {
  margin-top: 10px;
  width: 183px;
  height: 52px;
  background-image: url(./images/sp.png);
  background-position: -21px -196px;
}

/* 新玩法页面 */
.cf-new {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg2.jpg);
  background-size: cover;
  overflow: hidden;
}
/* 新玩法详情 */
.cf-new .box1 {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding-top: 70px;
  width: 1440px;
  height: 100%;
  /* background-color: #fff; */
}
.cf-new .box1 .introduce {
  width: 907px;
  height: 200px;
  background-image: url(./images/sp.png);
  background-position: -795px -1030px;
  zoom: 0.7;
  animation: introduce 1s linear alternate forwards;
}
/* 新玩法页面图片动画 */
@keyframes introduce {
  0% {
    transform: translateY(-270px);
  }

  100% {
    transform: translateY(0px);
  }
}
/* 新玩法详情 */
.cf-new .box1 .particulars {
  display: flex;
  width: 1440px;
  height: 480px;
  animation: particulars 1s linear alternate forwards;
}
/* 新玩法详情动画 */
@keyframes particulars {
  0% {
    transform: translateY(500px);
  }

  100% {
    transform: translateY(0px);
  }
}
.cf-new .box1 .particular a {
  display: block;
  width: 480px;
  height: 480px;
  z-index: 6;
}
.cf-new .box1 .particulars img {
  width: 480px;
  height: 480px;
}
.cf-new .box1 .ctt {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  transform: translate(-50%, -48%);
}
.cf-new .box1 .ctt img {
  display: none;
  width: 800px;
  height: 600px;
  pointer-events: none;
}

/* 彩带装饰 */
.cf-new .aoe1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 815px;
  height: 215px;
  background-image: url(./images/p2-cover.png);
}
.cf-new .aoe2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 620px;
  height: 315px;
  background-image: url(./images/p2-cover.png);
  background-position: -1939px -1125px;
}
/* 左边猫 */
.cf-new .leftCat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 250px;
  animation: leftCat 1s linear alternate forwards;
}
/* 左边猫动画 */
@keyframes leftCat {
  0% {
    transform: translate(-400px, 250px);
  }

  100% {
    transform: translateX(0px, 0px);
  }
}
/* 右边猫 */
.cf-new .rightCat {
  position: absolute;
  right: 0;
  top: 0;
  width: 500px;
  height: 500px;
  animation: rightCat 1s linear alternate forwards;
}
/* 右边猫动画 */
@keyframes rightCat {
  0% {
    transform: translate(500px, -500px);
  }

  100% {
    transform: translateX(0px, 0px);
  }
}
/* 下一页图标 */
.cf-new .pgd {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(70%);
}
.pgd .nextPage {
  background-image: url(./images/sp.png);
  background-position: -48px 0;
  width: 101px;
  height: 76px;
  animation: nextPage 0.8s infinite 0.3s linear alternate forwards;
}

/* 生化更新页面 */
.cf-bhy {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg3.jpg);
  background-size: cover;
  overflow: hidden;
}

.cf-bhy .wrapper {
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding-top: 70px;
  width: 1440px;
  height: 937px;
  /* background-color: #fff; */
}
/* 生化更新主标题 */
.cf-bhy .wrapper .headline {
  width: 608px;
  height: 183px;
  background-image: url(./images/sp.png);
  background-position: -75px -737px;
  zoom: 0.7;
  animation: introduce 1s linear alternate forwards;
}
.cf-bhy .wrapper .pcs {
  position: absolute;
  left: 0;
  top: 200px;
  width: 100%;
  height: 500px;
  animation: particulars 1s linear alternate forwards;
}
.cf-bhy .wrapper .pcs img {
  width: 100%;
  height: 580px;
}
/* 版本蓝贴链接按钮 */
.cf-bhy .wrapper .update {
  animation: particulars 1.5s linear alternate forwards;
}
.cf-bhy .wrapper a {
  position: absolute;
  left: 50%;
  bottom: -650px;
  transform: translateX(-50%);
  display: block;
  width: 415px;
  height: 110px;
  background-image: url(./images/sp.png);
  background-position: -246px -5px;
}
/* 下一页图标 */
.cf-bhy .wrapper .pgd {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) scale(70%);
}
.cf-bhy .wrapper .nextPage {
  background-image: url(./images/sp.png);
  background-position: -48px 0;
  width: 101px;
  height: 76px;
  animation: nextPage 0.8s infinite linear alternate forwards;
}

/* 彩带和花定位 */
.cf-bhy .aoe3 {
  position: absolute;
  right: 0;
  top: 0;
  background-image: url(./images/p3-cover.png);
  background-position: -1076px -44px;
  width: 1359px;
  height: 275px;
}
.cf-bhy .aoe4 {
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url(./images/p3-cover.png);
  background-position: 0 -1185px;
  width: 1258px;
  height: 165px;
}
.cf-bhy .aoe5 {
  position: absolute;
  right: 230px;
  bottom: 100px;
  background-image: url(./images/p3-cover.png);
  background-position: -2150px -1120px;
  width: 66px;
  height: 66px;
}

/* 新赛季页面 */
.cf-newalis {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg4.jpg);
  background-size: cover;
  overflow: hidden;
}
.cf-newalis .wrapper {
  display: flex;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding-top: 100px;
  width: 1440px;
  height: 937px;
}
/* 新赛季页面标题 */
.cf-newalis .wrapper .leftBox {
  width: 40%;
  height: 100%;
}
/* 左边赛季介绍 */
.cf-newalis .wrapper .leftBox .headline3 {
  width: 600px;
  height: 180px;
  background-image: url(./images/sp.png);
  background-position: -75px -994px;
  zoom: 0.7;
  animation: introduce 1s linear alternate forwards;
}
.cf-newalis .wrapper .leftBox img {
  margin: 20px 0 0 90px;
  width: 470px;
  height: 570px;
  animation: particulars 1s linear alternate forwards;
}
/* 右边新增排位武器 */
.cf-newalis .wrapper .rightBox {
  width: 60%;
  height: 100%;
}
.cf-newalis .wrapper .rightBox .rabbit {
  width: 100%;
  animation: introduce 1s linear alternate forwards;
}
/* 右边排位地图调整 */
.cf-newalis .wrapper .rightBox .ranking {
  margin: 0 auto;
  padding-top: 30px;
  width: 90%;
  height: 335px;
  background-image: url(./images/p4-pic3.png);
  background-size: cover;
  animation: particulars 1s linear alternate forwards;
}
.cf-newalis .rightBox .ranking h1 {
  text-align: center;
  font-weight: 400;
  color: #e13e36;
}
/* 排位分类 */
.cf-newalis .rightBox .ranking .classify {
  display: flex;
  margin-top: -15px;
  width: 100%;
  height: 70px;
  padding-left: 170px;
}
.cf-newalis .rightBox .ranking .classify span {
  width: 200px;
  height: 50px;
  border-radius: 25px;
  background-color: #f3dc4e;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  color: #ed3b2b;
  cursor: pointer;
}
.cf-newalis .rightBox .ranking .classify .clr {
  background-color: #ed3b2b;
  color: #f3dc4e;
}
.cf-newalis .rightBox .ranking .classify span:nth-child(2) {
  margin-left: 70px;
}
/* 下面的详情 */
.cf-newalis .rightBox .ranking .pis {
  padding: 0 70px;
}
.cf-newalis .rightBox .ranking .pis img {
  width: 100%;
}
/* 下一页图标 */
.cf-newalis .pgd {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(70%);
}
.cf-newalis .pgd .nextPage {
  background-image: url(./images/sp.png);
  background-position: -48px 0;
  width: 101px;
  height: 76px;
  animation: nextPage 0.8s infinite 0.3s linear alternate forwards;
}

/* 新武器模块 */
.cf-neweapon {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg5.jpg);
  background-size: cover;
  overflow: hidden;
}
/* 武器背景 */
.cf-neweapon .centre {
  position: absolute;
  top: 8%;
  left: 13%;
  height: 650px;
  animation: rigth 1s linear alternate forwards;
}
/* 从左往右动画 */
@keyframes rigth {
  0% {
    transform: translateX(-500px);
  }

  100% {
    transform: translateX(0px);
  }
}
.cf-neweapon .wrapper {
  box-sizing: border-box;
  display: flex;
  position: relative;
  margin: 0 auto;
  padding-top: 100px;
  width: 1440px;
  height: 937px;
}
.cf-neweapon .wrapper .hde {
  display: block;
  position: absolute;
  left: 0;
  top: 100px;
  width: 486px;
  height: 180px;
  background-image: url(./images/sp.png);
  background-position: -797px -253px;
  zoom: 0.7;
  animation: introduce 1s linear alternate forwards;
}
/* 武器详情 */
.cf-neweapon .wrapper .single {
  width: 80%;
  height: 80%;
  animation: rigth 1s linear alternate forwards;
}
.cf-neweapon .wrapper .single img {
  width: 100%;
  height: 100%;
}
/* 武器选择 */
.cf-neweapon .wrapper .all {
  width: 288px;
  height: 85%;
  animation: left 1s linear alternate forwards;
  /* border: 1px solid #fff; */
}
/* 从右往左动画 */
@keyframes left {
  0% {
    transform: translateX(500px);
  }

  100% {
    transform: translateX(0px);
  }
}
.cf-neweapon .wrapper .all ul {
  padding: 0;
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
.cf-neweapon .wrapper .all ul li {
  width: 100%;
  height: 33%;
}
.cf-neweapon .wrapper .all ul li img {
  display: block;
  width: 80%;
  margin: 0 auto;
}
.amplify {
  transform: scale(1.3);
}
/* 下一页图标 */
.cf-neweapon .pgd {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%) scale(70%);
}
.cf-neweapon .pgd .nextPage {
  background-image: url(./images/sp.png);
  background-position: -48px 0;
  width: 101px;
  height: 76px;
  animation: nextPage 0.8s infinite 0.3s linear alternate forwards;
}
.cf-neweapon .doll {
  position: absolute;
  left: 50%;
  bottom: 100px;
  width: 500px;
  height: 100px;
  transform: translateX(-50%);
}
.cf-neweapon .doll span {
  display: block;
  width: 500px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 35px;
  color: #f3dc4e;
  background-image: url(./images/bg3.jpg);
  background-position: -300px -200px;
  border-radius: 25px;
  cursor: pointer;
  animation: particulars 1s linear alternate forwards;
}

/* 新角色模块 */
.cf-newrole {
  position: relative;
  width: 100%;
  height: 937px;
  background-image: url(./images/bg6.jpg);
  background-size: cover;
  overflow: hidden;
}
/* 背景 */
.cf-newrole .bgd {
  position: absolute;
  right: 0;
  top: 75px;
  width: 1450px;
  height: 750px;
  animation: left 1s linear alternate forwards;
}
.cf-newrole .wrapper {
  box-sizing: border-box;
  display: flex;
  position: relative;
  margin: 0 auto;
  padding-top: 100px;
  width: 1440px;
  height: 937px;
  /* background-color: antiquewhite; */
}
/* 标题 */
.cf-newrole .wrapper .hde {
  position: absolute;
  top: 63px;
  right: 26px;
  width: 495px;
  height: 180px;
  background-image: url(./images/sp.png);
  background-position: -778px -789px;
  zoom: 0.75;
  animation: introduce 1s linear alternate forwards;
}
/* 左边人物、物品 */
.cf-newrole .wrapper .leftRole {
  width: 20%;
  height: 100%;
  animation: rigth 1s linear alternate forwards;
}
.cf-newrole .wrapper .leftRole ul {
  margin-left: -50px;
  width: 100%;
  height: 100%;
}
.cf-newrole .leftRole ul li {
  width: 100%;
  height: 33%;
}
.cf-newrole .leftRole ul img {
  display: block;
  width: 200px;
  margin: 0 auto;
}
/* 右边介绍详情 */
.cf-newrole .rigthHdc {
  width: 80%;
  height: 100%;
  animation: left 1s linear alternate forwards;
}
.cf-newrole .rigthHdc img {
  margin-left: -45px;
  margin-top: -14px;
  width: 1415px;
  height: 740px;
}

/* 侧边分页栏 */
.sidebar {
  width: 200px;
  min-height: 511px;
  position: fixed;
  top: 50%;
  left: 37px;
  transform: translateY(-50%);
  z-index: 99;
}
.sidebar ul {
  padding: 0;
  width: 100%;
  height: 100%;
}
.sidebar ul li {
  position: relative;
  width: 100%;
  height: 73px;
  color: #dab861;
  margin-top: 15px;
}
.sidebar ul li img {
  width: 200px;
  height: 63px;
  cursor: pointer;
}
.sidebar ul li img:first-child {
  position: absolute;
}
.sidebar ul li .shows {
  position: absolute;
  z-index: 100;
}
.sidebar ul li ins,
span {
  margin-top: 15px;
  cursor: pointer;
}
.sidebar ul li span {
  margin-left: 55px;
}
